<template>
  <div class="classList">
    <el-container>
      <el-header>
        <div class="search">
          <div class="btnSearch">
            <el-button type="primary" icon="el-icon-search" @click="getUserTest(index,key)">搜索</el-button>
          </div>
          <el-input  placeholder="请输入内容" v-model="key"></el-input>
        </div>
      </el-header>
      <el-main>
        <div class="CourseTable">
          <el-table
              :data="tableData"
              :header-cell-style="{textAlign:'center',background:'#00ffeb'}"
              :cell-style="{textAlign:'center'}"
              :stripe="true"
              style="width: 950px;margin: auto">
            <el-table-column
                prop="className"
                label="课程名称"
                width="260">
            </el-table-column>
            <el-table-column
                prop="testName"
                label="试卷名称"
                width="150">
            </el-table-column>
            <el-table-column
                prop="time"
                label="限时(min)"
                width="150">
            </el-table-column>
            <el-table-column
                label="成绩"
                width="150"
            >

              <template slot-scope="scope" >
                <div v-if="s[scope.$index]">
                  <span v-if="s[scope.$index]!==null">
                      {{s[scope.$index].score}}
                  </span>
                </div>
                <span v-if="s[scope.$index]===null">
                      暂无成绩
                </span>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="240">
              <template slot-scope="scope">
                <el-button type="primary" style="margin-right: 5px" @click="$router.push({name:'Exam',query:{testId:scope.row.testId}})">
                  <span v-if="s[scope.$index]===null">
                      开始考试
                  </span>
                  <span v-else>
                      查看试卷
                  </span>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <el-footer>
        <div >
          <el-divider ></el-divider>
          <div style="height:0;display: flex; margin: auto">
            <el-pagination
                :page-size="10"
                layout="prev, pager, next, jumper"
                :total=total
                :current-page=index
                @current-change="(index)=> getUserTest(index,this,key)"
                style="margin: 0 auto"
            >
            </el-pagination>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "MyTest",
  data(){
    return{
      tableData:[],
      total:1,
      index:1,
      key:'',
      s:[]
    }
  },
  methods:{
    async getUserTest(index,key){
      await this.$axios.post('/getUserTest',
          {
            key:key,
            index:index,
            userId:this.Cookies.get("userId")
          }
      ).then(resp=>{
        this.tableData=resp.data;
        this.getScore(resp.data)
      })
      this.$axios.post('/countUserTest',
          {
            key:key,
            userId:this.Cookies.get("userId")
          }
      ).then(resp=>{
        this.total=resp.data;
      })
    },
    async getScore(da) {
      for (let i=0;i<da.length;i++) {
        await this.$axios.post('/getScore', {
          userId: this.Cookies.get("userId"),
          testId: da[i].testId
        }).then(res => {
          this.s.push(res.data.testUser)
        });
      }
    },
  },
  created() {
    this.getUserTest(1,'');
  },
  mounted() {

  }

}
</script>

<style scoped>
.classList{
  background-color: white;
  width: 98%;
  margin: auto;
  display: block;
  height: 100%;

}

.search {
  height: 75px;
  background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));
  margin-top: 5px;

}
.el-input {
  width: 200px;
  border: 1px solid #00aeff;
  border-radius: 12px;
  display: flex;
  margin: 12px;
  float: right;
}
.el-input__inner{
  border-radius: 12px;
}
.btnSearch{
  display: flex;
  float: right;
  margin: 12px;
}


.menu{
  width: 94%;
  margin: 12px auto auto auto;
  display: inline-block;
  height: 85%;
}
.image{
  width: 100%;
  height: 170px;
  display: block;
}
.text{
  height: 110px;
  background:linear-gradient(45deg,#62bcec,#b1aadb, #5f86d7)
}

h3{
  display: flex;
  margin-left: 3px;
}
.className>a{
  font-size: 18px;
  color: #2b333b;
}
.card-btn{
  display: flex;
}
.el-divider--horizontal{
  margin: 5px auto;
  width: 95%
}
.el-pagination {
  height: 70%;
  display: flex;;
}
.el-pager{

}
.el-footer{
  position:absolute;
  bottom:0;
  width: 80%;
  height:100px;
}
.CourseTable{
  width: 1200px;
  height: 700px;
  margin: 2px auto auto;
}
</style>
